<template>
    <div>
        <!-- 搜索表单 -->
        <div class="search-div">
            <el-form label-width="70px" size="small">
                <el-row :gutter="20">
                    <el-col :span="4.5">
                        <el-form-item label="课程归属">
                            <el-select v-model="ownership" style="width: 100%" placeholder="请选择或输入课程名称">
                                <el-option v-for="option in ownershipOptions" :key="option.id" :label="option.name"
                                           :value="option.id"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col>
                        <el-button type="primary" size="small" @click="search">搜索</el-button>
                        <el-button size="small" @click="resetData">重置</el-button>
                        <el-button type="warning" size="small" @click="showSelectedCourses">查看已选课程</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </div>

        <!-- 数据表格 -->
        <el-table :data="list" style="width: 100%" border>
            <el-table-column type="index" label="序号" width="60px" align="center"/>
            <el-table-column prop="courseName" label="课程名称" min-width="180px"/>
            <el-table-column prop="teachingClassName" label="教学班级" min-width="180px"/>
            <el-table-column prop="teacherName" label="授课老师" min-width="180px"/>
            <el-table-column prop="maxCount" label="最大人数" min-width="130px"/>
            <el-table-column prop="studentNum" label="已选人数" min-width="100px"/>
            <el-table-column prop="ownershipName" label="课程归属" min-width="200px"/>
            <el-table-column label="操作" align="center" #default="scope" width="140px" fixed="right">
                <el-button type="primary" size="small" :disabled="draggabled" @click="addStudent(scope.row)"> 选课
                </el-button>
                <el-button type="danger" size="small" @click="deleteById(scope.row)"> 退课</el-button>
            </el-table-column>
        </el-table>

        <!-- 分页组件 -->
        <el-pagination v-model:current-page="pageParams.page" v-model:page-size="pageParams.limit"
                       :page-sizes="[5, 10, 20, 50, 100]" @size-change="fetchData" @current-change="fetchData"
                       layout="total, sizes, prev, pager, next" :total="total"/>

        <!-- 查看已选课程抽屉 -->
        <el-drawer v-model="drawerVisible" title="已选课程" direction="rtl" size="20%">
            <el-table :data="selectedCourses" size="large" border>
                <el-table-column prop="courseName" label="课程名称"/>
                <el-table-column prop="teachingClassName" label="教学班级"/>
            </el-table>
        </el-drawer>
    </div>
</template>

<script setup>
import {onMounted, ref, watch} from 'vue';
import {
    GetElectiveCourseByStudentNumber,
    GetElectiveCourseListByPage,
    StudentsCourseDelete,
    StudentsCourseSelection
} from "@/api/teachingClass";
import {ElMessage} from 'element-plus';
import {FindAllOwnership} from "@/api/course";
import {useUserinfo} from "@/components/Avatar/hooks/useUserinfo";

const {userinfo} = useUserinfo()
const userInfo = userinfo
const list = ref([]);
const ownership = ref('');
const ownershipOptions = ref([]);
const selectedCourses = ref([]);
const selectedCount = ref('');
const draggabled = ref(false);
const pageParams = ref({page: 1, limit: 10});
const total = ref(0);
const drawerVisible = ref(false);

onMounted(async () => {
    await fetchOwnershipList();
    await fetchData();
    await GetElectiveCourse()
});

const fetchOwnershipList = async () => {
    const {data} = await FindAllOwnership();
    ownershipOptions.value = data;
};

const search = () => {
    fetchData();
};

const resetData = () => {
    ownership.value = '';
};

const fetchData = async () => {
    const {data} = await GetElectiveCourseListByPage(
        pageParams.value.page,
        pageParams.value.limit,
        ownership.value);
    list.value = data.list;
    total.value = data.total;
};

const addStudent = async (row) => {
    if (row.maxCount > row.studentNum) {
        const {code} = await StudentsCourseSelection(row.teachingClassId, userInfo.value.username);
        if (code === 200) {
            ElMessage.success("选课成功");
            await fetchData();
            selectedCount.value += 1;
        } else ElMessage.warning("已选择此课程，请勿重复选择")
    } else ElMessage.warning("已选人数已满")
};

const deleteById = async (row) => {
    const {code} = await StudentsCourseDelete(row.teachingClassId, userInfo.value.username);
    if (code === 200) {
        ElMessage.success("退课成功");
        selectedCount.value -= 1;
        await fetchData();
    } else ElMessage.warning("未选择此教学班级，请勿重复退课")
};

const showSelectedCourses = async () => {
    drawerVisible.value = true;
    await GetElectiveCourse()
};
const GetElectiveCourse = async () => {
    const {data} = await GetElectiveCourseByStudentNumber(userInfo.value.username);
    selectedCourses.value = data;
    selectedCount.value = selectedCourses.value.length
}

watch(selectedCount, () => {
    if (selectedCourses.value > 1) {
        ElMessage.warning("最多只能选择两个课程");
        draggabled.value = true;
    }
})

</script>

<style scoped>
.search-div {
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #ebeef5;
    border-radius: 3px;
    background-color: #fff;
}
</style>
